<template>
  <block>
    <!-- #ifdef MP-WEIXIN -->
    <button :class="btnClass" @click="login" v-if="!userInfo.memberName">
      <slot></slot>
    </button>
    <button
      v-if="userInfo.memberName && !userInfo.phone"
      :class="btnClass"
      @getphonenumber="getUserPhone"
      open-type="getPhoneNumber"
    >
      <slot></slot>
    </button>
    <button
      :class="btnClass"
      @click="checks"
      v-if="userInfo.memberName && userInfo.phone"
    >
      <slot></slot>
    </button>
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <button
      :class="btnClass"
      @click="login"
      onTap="getAuthCode"
      v-if="!userInfo"
    >
      <slot></slot>
    </button>
    <button
      :class="btnClass"
      open-type="getAuthorize"
      @getAuthorize="getUserPhone"
      @error="onAuthError"
      scope="phoneNumber"
      v-if="userInfo && !userInfo.phone"
    >
      <slot></slot>
    </button>
    <button :class="btnClass" @click="checks" v-if="userInfo && userInfo.phone">
      <slot></slot>
    </button>
    <!-- #endif -->
  </block>
</template>

<script>
import mixins from '@/mixins'

export default {
  mixins: [mixins],
  props: {
    btnClass: {
      type: String
    }
  },
  methods: {
    checks() {
      this.$emit('checks')
    }
  }
}
</script>

<style lang="less">
/* #ifdef MP-WEIXIN */
.receive {
  font-size: 30rpx;
  border-radius: 20rpx;
}
/* #endif */
/* #ifdef MP-ALIPAY */
.receive {
  font-size: 30rpx;
  border-radius: 20rpx;
  width: 35%;
}
/* #endif */

.btn-coupon {
  background: #fff;
  color: red;
  border: 1px solid red;
  border-radius: 40rpx;
  padding: 0 20rpx;
}

/* #ifdef MP-WEIXIN */
.btns {
  background: #df0027;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 100rpx;
  color: #fff;
  font-size: 30rpx;
}
/* #endif */
/* #ifdef MP-ALIPAY */
.btns {
  background: #df0027;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 100rpx;
  color: #fff;
  font-size: 30rpx;
  margin: 0 40rpx;
  flex: 1;
}
/* #endif */
</style>
